<template>
  <div class="param-info" v-if="Object.keys(goodsParams).length !== 0">
    <table v-for="(table,k) in goodsParams.sizes"
           :key="k" class="info-size">
      <tr v-for="(tr,i) in table" :key="i">
        <td v-for="(td,j) in tr" :key="j">{{td}}</td>
      </tr>
    </table>
    <table class="info-params">
      <tr v-for="(item,i) in goodsParams.infos" :key="i">
        <td>{{item.key}}</td>
        <td>{{item.value}}</td>
      </tr>
    </table>
    <div class="info-img" v-if="goodsParams.image.length !== 0">
      <img :src="goodsParams.image" alt="">
    </div>
  </div>
</template>

<script>
export default {
  name: "DetailGoodsParams",
  props: {
    goodsParams: {
      type: Object,
      default() {
        return {}
      }
    }
  }
}
</script>

<style scoped>
.param-info{
  padding: 20px 15px;
  border-bottom: 5px solid #f2f5f8;
}

.param-info .info-size,.param-info .info-params{
  width: 100%;
  border-collapse: collapse;
}
.param-info .info-size tr,.param-info .info-params tr{
  border-bottom: 1px solid #F2F5F8;
}
.param-info .info-size td{
  padding: 10px;
  font-size: 14px;
}
.param-info .info-params td{
  font-size: 14px;
}
.param-info .info-params td:first-child{
  width: 95px;
  padding: 10px;
}
.param-info .info-params td:last-child{
  color: var(--color-high-text);
}
.param-info .info-img img{
  width: 100%;
}
</style>